<template>
    <div class="consultant-details">
        <el-card>
            <div class="header">
                <img :src="data.avatar" alt="顾问头像" class="avatar" />
                <div class="info">
                    <h2>{{ data.consultantName }}</h2>
                    <p>{{ data.personalIntroduction }}</p>
                    <p>地址: {{ data.address }}</p>
                    <p>等级: {{ data.consultantLevel.levelName }}</p>
                </div>
            </div>

            <!-- 擅长领域 -->
            <el-divider>擅长领域</el-divider>
            <el-tag v-for="(item, index) in data.consultantExcellences" :key="index">
                {{ item.fieldOfExcellence.fieldName }}
            </el-tag>

            <!-- 收费标准 -->
            <el-divider>收费标准</el-divider>
            <el-table :data="data.feeStandards" style="width: 100%">
                <el-table-column prop="consultationMethods" label="咨询方式" />
                <el-table-column prop="consultationPrice" label="价格" />
                <el-table-column prop="consultationNumber" label="次数" />
            </el-table>

            <!-- 课程展示 -->
            <el-divider>课程展示</el-divider>
            <div class="course-list">
                <el-card v-for="(course, index) in data.courses" :key="index" class="course-item">
                    <img :src="course.image" alt="课程图片" class="course-image" />
                    <p>{{ course.courseName }}</p>
                </el-card>
            </div>

            <!-- 用户评论 -->
            <el-divider>用户评论</el-divider>
            <div v-for="(review, index) in data.userReviews" :key="index" class="review">
                <el-rate :model-value="review.xing" disabled />
                <p><strong>{{ review.username }}</strong> ({{ review.reviewTime }})</p>
                <p>{{ review.reviewContent }}</p>
            </div>

            <!-- 留言与回复 -->
            <el-divider>留言与回复</el-divider>
            <div v-for="(word, index) in data.answerLeaveWords" :key="index" class="leave-word">
                <p><strong>留言:</strong> {{ word.leaveWord }}</p>
                <p><strong>回复:</strong> {{ word.answer }}</p>
            </div>
        </el-card>
    </div>
</template>

<script setup>

import { ref,defineProps } from 'vue';

const props = defineProps({
    form: {
        type: Object,
        default: () => {
            return {};
        }
    }
});
// console.log("-----------------------");
// console.log(props.form);
const data = ref(props.form);

</script>

<style scoped>
.consultant-details {
    max-width: 800px;
    margin: 0 auto;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
}

.header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.info h2 {
    margin: 0;
}

.course-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.course-item {
    width: 150px;
    text-align: center;
}

.course-image {
    width: 100%;
    height: auto;
}

.review {
    margin-bottom: 15px;
}

.leave-word {
    margin-bottom: 10px;
}
</style>